<template>
  <div id="alls">
    <div id="leftFrame">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textareaLeft"
        class="txtArea"
      >
      </el-input>
    </div>
    <el-button type="primary" style="height: 40px" @click="clearCode"
      >清除</el-button
    >
    <vertical-line
      size="12"
      text="左侧是代码区，右侧是运行结果！"
    ></vertical-line>
    <p style="white-space: nowrap; font-size: 15px">运行结果：</p>
    <div id="rightFrame">
      <iframe src="" frameborder="0" id="code_ifr" class="result"> </iframe>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import verticalLine from "@/components/verticalLine.vue";

export default {
  name: "HomeView",
  components: {
    verticalLine,
  },
  data() {
    return {
      cssTxt: `    #allsd {
            background-color: #909;
        }

        .lo {
            color: #0a0;
            font-size: 19px;
        }
`,
      htmlTxt: `  <p class="lo">今天是个好天气</p>`,
      textareaLeft: "",
      tt: "",
    };
  },
  methods: {
    clearable() {
      this.textareaLeft = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    ${this.cssTxt}
    </style>
</head>
<body>
    <div id="all">
      ${this.htmlTxt}
    </div>
</body>

</html>`;
    },
    initPage() {
      let right = document.getElementsByClassName("result")[0];
      right.innerHTML = this.textareaLeft;
      // innerHtml：设置或获取 HTML 语法表示的元素的后代。所以script标签里的内容还是识别识别不了
    },
    init_iframe() {
      const frame = document.getElementById("code_ifr");
      frame.srcdoc = this.textareaLeft;
    },
    clearCode() {
      console.log(1);
      this.htmlTxt = "";
      this.cssTxt = "";
      this.clearable();
    },
  },
  watch: {
    textareaLeft: {
      handler(n) {
        console.log(n);
        if (n) {
          console.log(n);
          this.initPage();
          this.init_iframe();
        }
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.textareaLeft = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    ${this.cssTxt}
    </style>
</head>
<body>
    <div id="all">
      ${this.htmlTxt}
    </div>
</body>

</html>`;
    this.initPage();
    this.init_iframe();
  },
};
</script>
<style lang="scss" scoped>
#alls {
  width: 1300px;
  height: 800px;
  display: flex;
  justify-content: space-between;
  border: 1px solid;
  #leftFrame,
  #rightFrame {
    width: 45%;
    height: 100%;
  }
}
.result {
  width: 100%;
  height: 100%;
  // background-color: #ff0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
// 文本框及滚动条样式
.txtArea {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100%;
  color: #383a42;
  background-color: #fafafa;
  font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono",
    "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata,
    Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif;
  &::v-deep textarea {
    height: 100%;
    // textarea禁止拖拽
    resize: none;
    font-size: 15px;
    &::-webkit-scrollbar {
      width: 6px;
      background-color: transparent;
      height: 0;
    }
    &::-webkit-scrollbar-thumb {
      width: 99%;
      border-radius: 5px;
      background-color: rgba(144, 146, 152, 0.3);
    }
  }
}
</style>
